<template>
  <div id="eqDetailDiv">
    <GoBack content="维修明细" :backUrl="backUrl" :faultId="searchForm.month" :planId="searchForm.monthType" :xgjlUrl="xgjlUrl" :orderId="searchForm.equiptTypeCode" v-if="!isEmpty(searchForm.personId)||!isEmpty(searchForm.equiptTypeCode)||!isEmpty(searchForm.equiptId)"></GoBack>

    <Breadcrumb content="维修明细" v-else />
    <div class="bodyContent">
      <Splitpanes horizontal class="horizontalLine">
        <Pane size="100">
          <!-- <vxe-toolbar perfect>
            <template #buttons>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="查询" :loading="tloading" @click="findMaintainPlanList"></vxe-button>

            </template>
          </vxe-toolbar> -->
          <div class="tableBody">
            <vxe-table ref="maintainPlanTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :data="maintainPlanList" :loading="tloading" @current-change="maintainPlanRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column type="seq" width="30" title=""></vxe-column>
              <vxe-column type="checkbox" width="30"></vxe-column>

              <vxe-column field="repairNo" title="维修单号" width="150">
                <template #default="{ row }">
                  <el-link type="primary" :underline="false" @click="executeRepair(row)">
                    <span> {{ row.repairNo}}</span>
                  </el-link>
                </template>
              </vxe-column>
              <vxe-column field="repairStatus" title="维修状态" width="80">
                <template #default="{ row }">
                  <div class="flex justify-atart">
                    <span :class="getStatusClass(row)" style="margin-right: 2px;">
                      {{ formatCommon(repairStatusList, row.repairStatus) }}
                    </span>
                    <!-- <el-tag type="danger" v-if="row.repairStatus!='15'&&row.overdue>0">
                      逾期{{row.overdue}}天
                    </el-tag> -->
                  </div>

                </template>
              </vxe-column>
              <vxe-column field="equiptCode" title="设备编码" width="100">
              </vxe-column>
              <vxe-column field="equiptName" title="设备名称" width="100">
              </vxe-column>
              <vxe-column field="specification" title="设备型号" width="150">
              </vxe-column>
              <vxe-column field="faultTypeName" title="故障类型" width="150">
              </vxe-column>
              <vxe-column field="workHours" title="维修工时" width="150">
              </vxe-column>
              <vxe-column field="repairFee" title="维修费用" width="150">
              </vxe-column>
              <vxe-column field="startDate" title="维修开始时间" width="150">
              </vxe-column>
              <vxe-column field="endDate" title="维修完成时间" width="150">
              </vxe-column>
              <vxe-column field="planNo" title="计划编号" width="150">
              </vxe-column>
              <vxe-column field="remark" title="说明">
                <template #default="{ row }">
                  <span>{{ row.remark }}</span>
                </template>
              </vxe-column>

            </vxe-table>

          </div>
        </Pane>
      </Splitpanes>
    </div>

  </div>
</template>
  
  <script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import moment from 'moment';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store'; //'../../../stores/store';
import { isEmpty } from 'lodash';
import GoBack from '@/components/GoBackNew.vue'; //返回组件

// 全局变量定义区 ==========

let tloading = ref(false); //加载状态
let maintainPlanList: any = reactive([]);
let repairStatusList: any = reactive([]); //选择字典
let maintainTypeList: any = reactive([]);
let sltMainlan: any = ref({});
let backUrl = ref(null);
let xgjlUrl = ref(null);
let planTypeList: any = reactive([
  { name: '单次', code: '1' },
  { name: '多次', code: '2' }
]); //选择字典

let searchForm = reactive({
  personId: '',
  equiptId: '',
  searchValue: '',
  month: '',
  monthType: '',
  equiptTypeCode: ''
});
// 方法定义区 =============
// 页面加载时更新列表(左侧)
onMounted(() => {
  if (!isEmpty(proxy.$route.query.personId)) {
    searchForm.personId = proxy.$route.query.personId.toString();
  }
  if (!isEmpty(proxy.$route.query.equiptTypeCode)) {
    searchForm.equiptTypeCode = proxy.$route.query.equiptTypeCode.toString();
  }
  if (!isEmpty(proxy.$route.query.equiptId)) {
    searchForm.equiptId = proxy.$route.query.equiptId.toString();
  }
  if (!isEmpty(proxy.$route.query.month)) {
    searchForm.month = proxy.$route.query.month.toString();
  }
  if (!isEmpty(proxy.$route.query.monthType)) {
    searchForm.monthType = proxy.$route.query.monthType.toString();
  }

  if (!isEmpty(proxy.$route.query.xgjlUrl)) {
    xgjlUrl.value = proxy.$route.query.xgjlUrl.toString();
  }

  if (!isEmpty(proxy.$route.query.url)) {
    backUrl.value = proxy.$route.query.url.toString();
  }

  if (!isEmpty(proxy.$route.query.planId)) {
    searchForm.monthType = proxy.$route.query.planId.toString();
  }
  if (!isEmpty(proxy.$route.query.faultId)) {
    searchForm.month = proxy.$route.query.faultId.toString();
  }

  if (!isEmpty(proxy.$route.query.pageSize)) {
    searchForm.personId = proxy.$route.query.pageSize.toString();
  }
  if (!isEmpty(proxy.$route.query.pageIndex)) {
    searchForm.equiptTypeCode = proxy.$route.query.pageIndex.toString();
  }

  if (isEmpty(searchForm.monthType) && isEmpty(searchForm.month)) {
    searchForm.monthType = 'thisMonth';
  }
  getDictItemsList(); //批量获取字典
  if (!isEmpty(searchForm.personId)) {
    getRepairDetailByPerson();
  } else if (!isEmpty(searchForm.equiptId)) {
    getRepairDetailByEquipt();
  } else if (!isEmpty(searchForm.equiptTypeCode)) {
    getRepairDetailByEqType();
  }
});

//批量获取字典
async function getDictItemsList() {
  let dictTreeTypeCodes: any = ['maintainType', 'repairStatus'];
  const codes = dictTreeTypeCodes.join(',');
  const url = '/api/sys/basDictDetail/findDictDetailListByDictCodes';
  const dictTreeTypeItems: any = await proxy.$http.get(url, { params: { code: codes } });
  const maintainTypes = dictTreeTypeItems.data.find((item: any) => item.code === 'maintainType');
  maintainTypeList.push(...maintainTypes.detailDataList);
  const planStatues = dictTreeTypeItems.data.find((item: any) => item.code === 'repairStatus');
  repairStatusList.push(...planStatues.detailDataList);
}

function getRepairDetailByEqType() {
  tloading.value = true;
  maintainPlanList.length = 0; //放入数据前清空数据
  const url = '/api/eq/eqRepairOrder/getRepairDetailByEqType';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        equiptTypeCode: searchForm.equiptTypeCode,
        monthType: searchForm.monthType,
        month: searchForm.month
      }
    })
    .then((res: any) => {
      maintainPlanList.push(...res.data);

      const kn = maintainPlanList.find((k: any) => k.id == sltMainlan.value.id);
      if (isEmpty(kn)) {
        maintainPlanRowClick({ row: maintainPlanList[0] }); //默认选中第一条数据
      } else {
        maintainPlanRowClick({ row: kn }); //默认选中第一条数据
      }

      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function getRepairDetailByEquipt() {
  tloading.value = true;
  maintainPlanList.length = 0; //放入数据前清空数据
  const url = '/api/eq/eqRepairOrder/getRepairDetailByEquipt';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        equiptId: searchForm.equiptId,
        monthType: searchForm.monthType,
        month: searchForm.month
      }
    })
    .then((res: any) => {
      maintainPlanList.push(...res.data);

      const kn = maintainPlanList.find((k: any) => k.id == sltMainlan.value.id);
      if (isEmpty(kn)) {
        maintainPlanRowClick({ row: maintainPlanList[0] }); //默认选中第一条数据
      } else {
        maintainPlanRowClick({ row: kn }); //默认选中第一条数据
      }

      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function getRepairDetailByPerson() {
  tloading.value = true;
  maintainPlanList.length = 0; //放入数据前清空数据
  const url = '/api/eq/eqRepairOrder/getRepairDetailByPerson';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        personId: searchForm.personId,
        monthType: searchForm.monthType,
        month: searchForm.month
      }
    })
    .then((res: any) => {
      maintainPlanList.push(...res.data);

      const kn = maintainPlanList.find((k: any) => k.id == sltMainlan.value.id);
      if (isEmpty(kn)) {
        maintainPlanRowClick({ row: maintainPlanList[0] }); //默认选中第一条数据
      } else {
        maintainPlanRowClick({ row: kn }); //默认选中第一条数据
      }

      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}
function maintainPlanRowClick({ row }: any) {
  if (isEmpty(row)) {
    sltMainlan.value = {};
    maintainPlanList.length = 0; //放入数据前清空数据
  } else {
    (proxy.$refs.maintainPlanTableRef as any).setCurrentRow(row);
    sltMainlan.value = row;
  }
}

function executeRepair(row: any) {
  const data = {
    id: row.id,
    equiptTypeCode: searchForm.equiptTypeCode,
    monthType: searchForm.monthType,
    month: searchForm.month,
    personId: searchForm.personId,
    url: '/repairDetail',
    xgjlUrl: backUrl.value
  };
  proxy.$router.push({ path: '/eqRepairEdit', query: data });
}

function getStatusClass(row: any) {
  const status = row.repairStatus;
  if (status == '0') {
    return 'text-orange';
  } else if (status == '5') {
    return 'text-orange';
  } else if (status == '10') {
    return 'text-red';
  } else if (status == '15') {
    return 'text-green';
  } else if (status == '20') {
    return 'text-blue';
  } else if (status == '25') {
    return 'text-black';
  }
}

function formatCommon(arr: any, value: any) {
  for (const item of arr) {
    if (item.code == value) {
      return item.name;
    }
  }
}
function formatPlanType(row: any) {
  for (const item of planTypeList) {
    if (item.code == row.planType) {
      return item.name;
    }
  }
}
</script>
  
  <style lang="scss" scoped>
#eqDetailDiv {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
    }
    .horizontalLine {
      :deep(.splitpanes__splitter) {
        background-color: $base-white;
      }
    }

    // 中间table表格
    .tableBody {
      height: calc(100% - 40px - 32px);
    }
    // 质控靶值设定弹框表格
    .tableTargetBody {
      height: 600px;
      .tableTargetBodyRight {
        height: calc(100% - 2px);
        border: 1px solid #e8eaec;

        .closeBtn {
          margin-left: 720px;
        }
      }
    }

    // 右侧保存按钮
    .saveBtn {
      float: right;
      margin: 5px 10px;
    }
    .el-form {
      padding-right: 15px;
      .el-form-item--large {
        margin-bottom: 10px;
      }
      .el-button {
        padding: 5px 2px !important;
      }
      :deep(.el-input__inner) {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    // 弹框
    .el-dialog {
      font-weight: 700;
      max-height: 1000px;
      padding: 10px;
    }
    // 最右侧质控项目设定表格
    .tableBox {
      height: calc(100% - 40px);
    }
    .el-link_clazz {
      margin-right: 5px;
    }
    .elTagClazz {
      margin-left: 5px;
      cursor: pointer;
    }
    .selectedElTagClazz {
      margin-left: 5px;
      cursor: pointer;
      background-color: #89d7fc;
    }
  }
}
</style>